<template>
  <!-- 自己封装日期组件调用 -->
  <div class="calendar-box" style="width: 800px; margin: 0 auto">
    <el-row>
      <el-col :span="12">
        <MyDatePicker
          placeholder="日期只读 v-model 自动绑定"
          :disabled="false"
          :quickOptions="quickOptions"
          v-model="dateValue"
        />
      </el-col>
      <el-col :span="12">
        <MyDatePicker
          placeholder="日期只读 v-model 自动绑定"
          :disabled="false"
          :quickOptions="quickOptions"
          v-model="dateValue"
        />
      </el-col>
    </el-row>

    <MyDatePicker
      placeholder="日期可输入"
      :readonly="false"
      :clearable="true"
    />
    <MyDatePicker placeholder="日期禁止" :disabled="true" />

    <el-button type="success" @click="getData">获取结果</el-button>
    <hr />
    <pre>
      
      使用说明：

      1.引入组件
      import MyDatePicker from "./MyDatePicker.vue"; /n

      2.注入组件
      components: {
          MyDatePicker,
      },

      3.标签使用
      &lt;MyDatePicker 
          :placeholder="placeholder"
          :clearable="clearable"
          :disabled="disabled"
          v-model="dateValue"
          :value="dateValue"
      /&gt;

      v-model 配合 this.$emit("input", item.value);  回显切双向绑定值
      :value 只是回显

    </pre>
  </div>
</template>

<script>
import MyDatePicker from "../../components/date/MyDatePickerCss.vue";

export default {
  name: "MyDatePickerDemo",
  components: {
    MyDatePicker,
  },
  data() {
    return {
      dateValue: "", // 显示的日期
      quickOptions: [
        { level: "自开工起", value: "自开工起" },
        { level: "到竣工结算", value: "到竣工结算" },
      ],
    };
  },
  created() {
    setTimeout(() => {
      alert("自开工起")
      this.dateValue = "自开工起";
    }, 1000);
  },
  computed: {},
  methods: {
    getData() {
      alert(this.dateValue ? this.dateValue : "为空");
    },
  },
};
</script>

<style lang="less" scoped></style>
